<template>
	<view class="mine-balance-list">
		<view class="count-info flex-center flex-column c-base" :style="{background:primaryColor}">
			<view class="f-caption">当前余额(元)</view>
			<view class="price mt-sm">{{userInfo.balance}}</view>
		</view>
		<view class="flex-center fill-base mg-big pd-lg box-shadow radius-24" v-for="(item,index) in list.data"
			:key="index">
			<view class="flex-1 mr-lg">
				<view class="flex-y-baseline f-caption c-warning text-bold">
					¥<view class="f-sm-title">{{item.price}}</view>
				</view>
				<view class="f-caption c-desc mt-sm">{{item.title}}</view>
				<view class="f-caption mt-sm" :style="{color:primaryColor}" v-if="item.member_level*1>0">
					{{item.member_title}}
				</view>
			</view>
			<view @tap.stop="toChangeItem('chooseInd',index)" class="stored-btn flex-center f-caption c-base radius-4"
				:style="{background:primaryColor}">立即充值
			</view>
		</view>
		<view class="fill-base mg-big pd-lg box-shadow radius-24">
			<view class="input-item flex-between radius-16">
				<input v-model="price" v-on:input="checkInput($event,'price')" type="digit"
					class="flex-1 mr-lg pt-md pb-md pl-lg f-paragraph c-title" placeholder="请输入充值金额，无赠送"
					placeholder-class="f-paragraph c-caption" />
				<view @tap.stop="toChangeItem('chooseInd','price')" class="stored-btn flex-center f-caption c-base"
					:style="{background:primaryColor}">立即充值
				</view>
			</view>
		</view>
		<view class="fill-base mg-big pd-lg box-shadow radius-24">
			<view class="flex-y-center mb-lg">
				<view class="common-line" :style="{background:primaryColor}"></view>
				<view class="f-title c-title text-bold">充值说明</view>
			</view>
			<view class="f-desc c-caption" v-html="text"></view>
		</view>


		<view class="space-footer"></view>

		<uni-popup ref="choose_item" type="bottom" :custom="true">
			<view @touchmove.stop.prevent class="popup-choose-item fill-base pt-lg pb-lg radius-top-34">
				<view @tap.stop="$refs.choose_item.close()" class="flex-between pl-lg pr-lg pb-lg" style="width: 100%;">
					<view class="flex-center f-title c-title text-bold">选择支付方式</view>
					<i class="iconfont icon-add-circle rotate-45" :style="{color:subColor}"></i>
				</view>

				<view @tap.stop="toChangeItem('payInd',index)" class="flex-between ml-md mr-md pl-sm pr-sm pt-lg pb-lg"
					:class="[{'b-1px-t':index>0}]" v-for="(item,index) in payList" :key="index">
					<view class="pay-item flex-y-center"><i class="iconfont mr-md" :class="[item.icon]"
							:style="{color:item.id==1?primaryColor:'#01AAF2'}"></i>
						<view class="flex-y-baseline">{{item.title}}
						</view>
					</view>
					<i class="pay-icon iconfont c-caption"
						:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':payInd == index}]"
						:style="{color:payInd==index?primaryColor:''}"></i>
				</view>
				<view class="space-lg"></view>
				<view @tap="toPay" class="pay-btn flex-center f-title c-base radius" :style="{background:primaryColor}">
					立即支付</view>
				<view class="space-lg"></view>
				<view class="space-safe"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				// 1微信支付；2余额支付；3支付宝支付
				payList: [{
						id: 1,
						title: '微信支付',
						icon: 'icon-wechat-pay'
					}
					// #ifdef APP-PLUS
					, {
						id: 3,
						title: '支付宝支付',
						icon: 'icon-alipay',
						is_disabled: false
					}
					// #endif
				],
				payInd: 0,
				chooseInd: 0,
				param: {
					page: 1,
					limit: 10
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: false,
				text: `
				<p>1、充值的本金和赠送金额均不可提现、转移、转赠</p>
				<p>2、使用范围：本平台所有项目或者商品皆可购买</p>`,
				price: ''
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad() {
			this.$util.showLoading()
			await this.initIndex()
		},
		onUnload() {
			this.$util.back()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return
			this.param.page = this.param.page + 1
			this.loading = true
			this.getList()
		},
		methods: {
			...mapActions(['getUserInfo']),
			async initIndex() {
				await this.getList()
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex()
			},
			async getList() {
				let {
					list: oldList,
					param,
				} = this
				let newList = await this.$api.mine.cardList(param);

				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			checkInput(e, key) {
				let val = this.$util.formatMoney(e.detail.value)
				this.$nextTick(() => {
					this[key] = val
				})
			},
			toChangeItem(key, val) {
				this[key] = val
				if (key === 'payInd') return
				this.$refs.choose_item.open()
				this.lockTap = false
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				validate.add(param.price, {
					name: "price",
					checkType: "isMoney",
					errorMsg: "请输入充值金额"
				});
				let message = validate.start();
				return message;
			},
			// 去支付
			async toPay() {
				let {
					chooseInd,
					price
				} = this
				let param = {}
				if (chooseInd == 'price') {
					param = {
						price
					}
					let msg = this.validate(param);
					if (msg) {
						this.$util.showToast({
							title: msg
						});
						return;
					}
				} else {
					let {
						id: card_id,
					} = this.list.data[chooseInd]
					param = {
						card_id
					}
				}
				let {
					id: pay_model
				} = this.payList[this.payInd]
				param.pay_model = pay_model
				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				try {
					let {
						pay_list
					} = await this.$api.mine.payBalanceOrder(param)
					this.$util.hideAll()
					if (pay_list) {
						if (param.pay_model == 3) {
							pay_list = {
								orderInfo: pay_list,
								provider: 'alipay'
							}
						}
						try {
							console.log(pay_list, "========pay_listpay_listpay_listpay_list")
							await this.$util.pay(pay_list)
							this.lockTap = false;
							this.price = ''
							this.$refs.choose_item.close()
							this.getUserInfo()
							this.$util.back()
							let url = `/mine/pages/stored/record`
							this.$util.goUrl({
								url
							})
						} catch (e) {
							this.lockTap = false;
							this.price = ''
							return;
						}
					}
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.price = ''
						this.$util.hideAll()
					}, 2000)
				}
			},
		}
	}
</script>


<style lang="scss">
	.mine-balance-list {
		.count-info {
			height: 338rpx;

			.price {
				font-size: 70rpx;
			}
		}


		.input-item {
			overflow: hidden;
			background: #F9F9F9;

			.stored-btn {
				width: 134rpx;
				height: 88rpx;
			}
		}


		.stored-btn {
			width: 132rpx;
			height: 58rpx;
		}



		.popup-choose-item {
			.icon-add-circle {
				font-size: 50rpx;
			}

			.pay-item {
				.iconfont {
					font-size: 50rpx;
				}
			}

			.pay-icon {
				font-size: 40rpx;
			}

			.pay-btn {
				width: 500rpx;
				height: 88rpx;
				margin: 0 auto;
			}
		}

	}
</style>
